<template>
    <el-card  class="box-card"> 
      <div class="img-box">
          <el-image fit="fill" style="width: 100%; height: 100%;" :src="cardData.imgUrl" @click.stop="handleChakan1"></el-image>
          <div class="purchaseNumber">
            <span style="margin: 0;">租箱编号:{{ cardData.releaseNo  }}</span></div>
      </div>
      <!-- <div class="boxImg">
        <img :src="cardData.imgUrl" id="img" @click.stop="handleChakan1">
        <div style="" v-if="cardData.releaseNo != null">
          <span style="position:absolute;left: 5px;">
            <template v-if="props.componentCallSource == 'xdqux'">求租编号:</template>
            <template v-else>出租编号:</template>
          </span>
          <p style="margin: 0 0 0 10px;">{{ cardData.releaseNo }}</p>
        </div>
      </div> -->

      <span style="font-weight: 400;">
        <el-tooltip :content="cardData.companyName" placement="top">
          <p class="text-ellipsis" style="margin: 5px 0 15px 0;">{{cardData.companyName}}</p>
        </el-tooltip>
      </span>
      <div class="boxMsg">
        <div class="logStation">
          <div class="boxMsg-fl" style="text-align: left;width:45%;">
              <el-tooltip v-if="props.roleType=='hdjk' || props.roleType=='xdjk'" effect="dark" :content="cardData?.carryCityName" placement="top">
               <div class="boxMsg-fl">
                <span style="font-size: 16px;font-weight: 600;color: black;">{{ cardData?.carryCityName || '--' }}</span>
                <!-- <span>{{ cardData?.carryCountryName || '--'}}</span> -->
               </div>
              </el-tooltip>
              <el-tooltip v-else effect="dark" :content="carryCityCountry" placement="top">
               <div class="boxMsg-fl">
                <span style="font-size: 16px;font-weight: 600;color: black;">{{ cardData?.carryCityName || '--' }}/</span>
                <span>{{ cardData?.carryCountryName || '--'}}</span>
               </div>
              </el-tooltip>
          </div>
          <div style="text-align: center;flex: 1;">
            <img style="text-align: center;padding-top: 3px; width: 16px;" src="@/assets/icons/svg/right.svg">
          </div>
          <div class="boxMsg-fr" style="text-align: right;width: 45%;">
            <el-tooltip  v-if="props.roleType=='hdjk' || props.roleType=='xdjk'" class="box-item" effect="dark" :content="cardData?.returnCityName" placement="top">
              <div class="boxMsg-fr">
                <span style="font-size: 16px;font-weight: 600;color: black;">{{ cardData?.returnCityName || '--' }}</span>
                <!-- <span>{{ cardData.returnCountryName }}</span> -->
              </div> 
              </el-tooltip>
              <el-tooltip  v-else class="box-item" effect="dark" :content="returnCityCountry" placement="top">
              <div class="boxMsg-fr">
                <span style="font-size: 16px;font-weight: 600;color: black;">{{ cardData?.returnCityName || '--' }}/</span>
                <span>{{ cardData.returnCountryName }}</span>
              </div> 
              </el-tooltip>
          </div>
        </div>
        <div class="relatedInfo" style="text-align: left;color:#212121 ;">
          <span>{{ boxTypeFilter(cardData.boxType) }}</span>
          <span style="margin: 0 5px;">{{ boxConditionFilter(cardData.boxCondition) }}</span>
          <span>箱使用期{{ cardData.boxUsagePeriod }}天</span>
        </div>
        <div class="price" style="text-align: left;">
          <span style="color:rgb(255, 0, 0);font-weight: 700;font-size: 18px;margin: 13px 0;">
            <span v-if="props.roleType!='hdjk' && props.roleType!='xdjk'">
              <template v-if="cardData.currency == 'CNY'">￥</template>
              <template v-if="cardData.currency == 'USD'">$</template>
              {{ cardData.unitPrice}}
            </span>
            
          </span>
          <!-- <span style="color:#212121;text-align: right;">
            <template v-if="props.componentCallSource == 'xdqux'">租箱量</template>
            <template v-else>可租箱量</template>{{ cardData.inventory }}个</span> -->
        </div>

        <!-- <div style="float: left;width: 100%;margin-bottom: 20px;">
          <el-button icon="ChatDotSquare" type="primary" plain style="width: 40%;"  @click.stop="handleZixun1">咨询</el-button>
          <el-button v-if="isOrder && props.roleType != 'xd'" type="primary" @click.stop="handleXiaDan1" style="width: 40%;float: right;">下单</el-button>
        </div> -->
        <el-row justify="center" style="margin-top: 5px;">
          <el-button icon="ChatDotSquare" type="primary" plain style="width: 40%;"  @click.stop="handleZixun1">咨询</el-button>
          <el-button v-if="isOrder && props.roleType != 'xdck'" type="primary" @click.stop="handleXiaDan1" style="width: 40%;float: right;">下单</el-button>
        </el-row>
      </div>
    </el-card>
    <el-dialog v-model="param.centerDialogVisible" title="提示" width="500" destroy-on-close center>
      <span>
        您还未完成企业实名认证，请您完成企业实名认证后，就可以进行相应业务功能操作啦！
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="param.centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="goAuthenticate">企业实名认证</el-button>
        </div>
      </template>
    </el-dialog>
</template>
<script setup lang="ts">
import longName from '@/components/cardRentBox/longName'
import { computed, onMounted, reactive, ref } from 'vue';
import { ChatDotSquare } from '@element-plus/icons-vue'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const emit = defineEmits(['handleXiaDan','handleChakan'])


const props = defineProps({
  cardData: {
    type: Object,
    default: () => { }
  },
  userId: {
    type: Number,
    default: 0
  },
  isSeekRent: {
    type: Boolean,
    default: false
  },
  componentCallSource: { // 组件调用来源
    type: String,
    default: '' //  xdqux：集装箱公司求租箱
  },
  roleType:{  //角色类型 xd：集装箱公司  hd：货代
    type: String, 
    default: ''
  }
})

// const param = ref({
//   companyId: 0
// })
// onMounted(() => {
//   const user = userStore.getUser() //user信息
//   param.value.companyId = user.companyId

// })
const isOrder = computed(() => {
  const user = userStore.getUser() //user信息
  if (props.cardData.companyId == user.companyId) {
    return false
  } else {
    return true
  }
})
const carryCityCountry = computed(() => {
  const obj = props.cardData
  let cityCountry = obj.carryCityName + '/' + obj.carryCountryName
  return cityCountry
})
const returnCityCountry = computed(() => {
  const obj = props.cardData
  let cityCountry = obj.returnCityName + '/' + obj.returnCountryName
  return cityCountry
})

const param = reactive({
  centerDialogVisible:false
})
import { useRouter } from 'vue-router'
const router = useRouter();
//
const handleXiaDan1 = () => {
  if (userStore.getUser() && userStore.getUser().examineStatus != '10') {
    param.centerDialogVisible = true
  }else{
    emit('handleXiaDan')
  }
}
const handleZixun1 = () => {
   if (userStore.getUser() && userStore.getUser().examineStatus != '10') {
      param.centerDialogVisible = true
   }else{
      console.log('点击了咨询')
      // emit('handleXiaDan')
    }
}
const handleChakan1 = () => {
 
  emit('handleChakan')

}
// 实名认证
const goAuthenticate = () => {
  router.push('/enterpriseManage/realAuthentication')
  param.centerDialogVisible = false
}

//过滤
const boxConditionFilter = (val: any) => {
  let result = ''
  const boxConditionList = [{ value: 15, label: '适货' }, { value: 10, label: '次新' }, { value: 20, label: '混提' },{ value: 5, label: '全新' }]
  boxConditionList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}
const boxTypeFilter = (val: any) => {
  let result = ''
  const boxTypeList = [{ value: 5, label: '40HQ' }, { value: 10, label: '40GP' }, { value: 15, label: '20HQ' }, { value: 20, label: '20GP' }]
  boxTypeList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}

</script>

<style scoped>

#card {
  opacity: 1;
  background: #ffffff;
  margin: 5px;
  text-align: center;
  width: 262px;
  height: auto;
  overflow: hidden;
}

.line-limit-length {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* //文本不换行，这样超出一行的部分被截取，显示... */
}

#img {
  width: 100%;
  height: 238px;
  opacity: 1;
  border-radius: 1px;
}

:deep(.el-card .el-card__body) {
  padding: 12px !important;
}

.boxMsg {
  font-size: 14px;
  color: #999999;
  border-collapse: separate;
  border-spacing: 0px 5px;
  margin-top: -20px;
}

.logStation {
  display: flex;
  justify-content: center;
  padding: 14px 0;
  /* height: 40px; */
}

.relatedInfo>span {
  border: 1px solid #eeeeee;
  padding: 0 5px;
  border-radius: 4px;
}

.price>span {
  display: inline-block;
  width: 50%;
}

.boxImg {
  position: relative;
}

.boxImg>div {
  width: 100%;
  position: absolute;
  bottom: 3px;
  left: 0;
  font-size: 12px;
  color: #ffffff;
  background: #ffa200;
  /* background: linear-gradient(to right, #ffa200, #ffffff); */
}


.box-card{
    width: 19%;
    float: left;
    margin:0 1% 10px 0
}
.img-box{
    width: 100%;
    height: 275px;
    position: relative;

}
.purchaseNumber{
  position: absolute;
  bottom: 0;
  left: 0;
  background: #2158F3;
  font-size: 12px;
  width: 100%;
  color: #fff;
}
.boxMsg-fl{
  overflow: hidden; /*超出隐藏*/
  white-space: nowrap;/*强制不换行*/
  text-overflow: ellipsis;
}
.boxMsg-fr{
  overflow: hidden; /*超出隐藏*/
  white-space: nowrap;/*强制不换行*/
  text-overflow: ellipsis;
}
</style>
